import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import * as Icons from '@ant-design/icons'
import { Layout, Menu, Breadcrumb, Button, Popconfirm, message, MenuProps, } from 'antd';
import React, { FC, useState, useRef, useEffect } from 'react';
import './index.scss'
import { title } from '../../components/Nav';
import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
type MenuItem = Required<MenuProps>['items'][number];

const { Header, Sider, Content } = Layout;

const Home: FC = () => {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  const innerH = document.documentElement.clientHeight
  const layout = useRef(null)
  const main = useRef(null)
  const sid = useRef(null)
  const layout1 = useRef(null)
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }
  useEffect(() => {
    // navigate('/home/first/homepage')
    // if(sid !== null)  {
    //   let a = sid.current.scrollHeight
    // } 
    // console.log(sid.current.scrollHeight)
    // if(sid !== null)  {
    //   let a = sid.current.scrollHeight
    // } 
    // console.log(sid.current.scrollHeight)0
    const autoHeight = () => {
      if ((main.current as unknown as HTMLElement).scrollHeight >= (main.current as unknown as HTMLElement).clientHeight) {

        // 实际内容高,大于 容器高  给容器设置 = 实际容器高
        (layout.current as unknown as HTMLElement).style.height = (main.current as unknown as HTMLElement).scrollHeight + 84 + 'px'
      }
    }


    let sidHeight = (sid.current as unknown as HTMLElement).scrollHeight
    if (sidHeight < innerH) {
      (layout.current as unknown as HTMLElement).style.height = innerH + 'px'
    }

    setTimeout(() => {
      autoHeight()
    }, 1000)

    window.onscroll = function () {
      
      autoHeight();
      (layout.current as unknown as HTMLElement).style.height = (sid.current as unknown as HTMLElement).scrollHeight + 'px'
    }

    const power = sessionStorage.getItem('power')
    if (typeof power === 'string') {
      let _power = JSON.parse(power)
      let arr = _power.map((v: any) => {
        return getItem(v.permissionsTitle, '' + v.permissionsId, React.createElement(Icons[v.icon]), [
          ...v.children.map((i: any) => getItem(<Link to={i.permissionsUrl}>{i.permissionsTitle}</Link>, i.permissionsId))
        ])
      })
      setList(arr)
    }
  }, [])
  // 退出登录
  const exitLogin = () => {
    navigate('/login')
    message.info('Clicked on Yes.');
  }
  // 面包屑
  const location = useLocation()
  const pathSnippets = location.pathname.split('/').filter(i => i);

  const breadcrumbNameMap: Record<string, string> = title;
  // 设置一个div
  let btn
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    if (location.pathname === url) btn = <Button className='box1'>{breadcrumbNameMap[url]}</Button>
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  extraBreadcrumbItems.shift()
  let tit: string
  // ------------

  const [collapsed, setCollapsed] = useState(false);
  // ---------------
  return <>
    <Layout ref={layout}>
      <Sider ref={sid} trigger={null} collapsible collapsed={collapsed}>
        <div className="logo">
          IQC质量管理系统
        </div>
        <Menu
          theme="dark"
          mode="inline"
          items={list}
        />
      </Sider>
      <Layout ref={layout1} className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          <Popconfirm placement="bottom" title="您确认退出登录吗?" onConfirm={exitLogin} okText="确定" cancelText="取消">
            <Button type='link'>xxx | 退出</Button>
          </Popconfirm>
          <Breadcrumb>{extraBreadcrumbItems}</Breadcrumb>
          {btn}
        </Header>
        <Content
          ref={main}
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  </>
}


export default Home